<%--
  Created by IntelliJ IDEA.
  User: zhangshiji
  Date: 2019-10-29
  Time: 14:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>


    <link type="text/css" rel="stylesheet" href="/css/articlelist.css"/>
    <link rel="stylesheet" href="/css/new_file.css"/>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/iconfont.css" />
    <script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/iconfont.js" type="text/javascript" charset="UTF-8"></script>
</head>
<style>
    body {
        background-color: #f6f6f6;
    }

    .bo {
        width: 1031px;

    }

    .bo1 {
        width: 693px;
        height: 60px;
        background-color: white;

    }

    .li > a {
        color: #4fb5ff;
    }

    .size {
        font-size: 19px;
        margin-top: 5px;
        margin-left: 30px;
    }

    .bor {
        background: white;
        width: 693px;
        /*height: 226px;*/
        margin-top: 20px;

    }

    /*.head{
        border: 1px solid black;
         width: 300px;
         height: 23px;
         margin-left: 20px;
        margin-top: 20px;
        font-size: 19px;
        font-weight: 600;
    }*/
    .mx {
        margin-left: -45px;
        margin-top: 4px;
        font-weight: 700;
        font-size: 18px;
    }

    .ms {
        margin-left: -45px;
        margin-top: -1px;
    }

    .btnmx {
        background: #e5f2ff;
        color: #0084ff;
    }

    .btnmx:hover {
        color: #0084ff;
    }

    .span {
        margin-top: 5px;
        color: #8590a6;
        text-decoration: none;
    }

    .span a:hover {
        text-decoration: none;
    }

    .m {
        margin-left: 10px;
    }

    #obj {
        width: 652.03px;
        box-shadow: 0 0 0 1px lightgray;
        /*display: none;*/
        border-radius: 5px;
        min-height: 230px;
    }

    .bu {
        margin-top: -22px;
        margin-left: 5px;
        color: #8590a6;
        outline: none;
    }

    .bu button:hover {
        text-decoration: none;
    }
</style>
<body>

<header>

    <div id="partofhead">
        <div id="shouye">
            <a href="/jsp/shouye.jsp">首页<span></span></a>
        </div>
        <div id="faxian">
            <a href="/jsp/zhihu.jsp">发现<span></span></a>
        </div>
        <div id="dnld">
            <a href="/jsp/file.jsp">等你来答<span></span></a>
        </div>
        <div id="sousuo">
            <form action="" method="">
                <div id="searchByTitle">
                    <input type="text" name="title" value="&nbsp;&nbsp;&nbsp;&nbsp;李方灏他长得帅吗"/>
                </div>
                <div id="searchByTitleSubmit">
                    <input type="submit" value="🔍"/>
                </div>
            </form>
        </div>
        <div>
            <img style="width: 75px; height: 50px;" src="/img/bihubihu.png"/>
        </div>
        <div class="head-nav-con clearFloat tou">
            <li class="drop-down">
                <img src="/file/upload/UserHeadPhoto/${User.headphoto}"
                     style="border-radius: 3px;display: inline-block;width: 30px;height: 30px;"/>
                <ul class="drop-down-content" style="margin-left: -35px;">
                    <li>
                        <a href="#" style="margin-left: 20px;">
                            <svg fill="currentColor" viewBox="0 0 24 24" width="16" height="16"
                                 style="margin-top: 5px; margin-left: -60px;">
                                <path d="M15.417 12.923c-.376.653-.837 1.281-.763 1.863.292 2.273 5.562 1.77 6.78 3.048.566.595.566.664.566 4.164-6.611-.07-13.363 0-20 0 .027-3.5 0-3.478.62-4.164 1.303-1.44 6.581-.715 6.78-3.133.045-.545-.38-1.114-.763-1.778C6.511 9.233 5.697 2 12 2s5.422 7.443 3.417 10.923z"
                                      fill-rule="evenodd"></path>
                            </svg>
                            <p style="margin-top: -12px;"><a href="/User/getAllUser.do?id=${User.id}" style="text-decoration: none;margin-left: 20px">我的主页</a></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg fill="currentColor" viewBox="0 0 24 24" width="16" height="16"
                                 style="margin-top: 5px; margin-left: -40px;">
                                <path d="M20.868 17.185a.896.896 0 0 1-.452.137c-.123 0-1.397-.26-1.617-.233-1.354.014-1.78 1.276-1.835 1.742-.055.453 0 .892.191 1.303a.8.8 0 0 1-.068.851C16.224 21.877 14.922 22 14.73 22a.548.548 0 0 1-.356-.151c-.11-.096-.685-1.138-1.069-1.468-1.304-.955-2.247-.329-2.63 0-.398.33-.672.7-.836 1.125a.632.632 0 0 1-.329.37c-1.354.426-2.918-.919-3.014-1.056a.564.564 0 0 1-.123-.356c-.014-.138.383-1.276.342-1.688-.342-1.9-1.836-1.687-2.096-1.673a3.192 3.192 0 0 0-.918.178.873.873 0 0 1-.59-.055c-.887-.462-1.136-2.332-1.109-2.51.055-.315.192-.521.438-.604.425-.164.809-.452 1.151-.85.931-1.262.343-2.25 0-2.634-.342-.356-.726-.645-1.15-.809-.138-.041-.234-.151-.33-.316-.38-1.434.613-2.552.867-2.77.255-.22.6-.055.723 0 .425.164.877.219 1.343.15C6.7 6.636 6.784 5.141 6.81 4.908c.014-.247-.11-1.29-.137-1.4a.488.488 0 0 1 .027-.315C7.317 2.178 9.071 2 9.222 2a.56.56 0 0 1 .439.178c.11.124.63 1.111 1 1.4.4.338 1.583.83 2.59.013.397-.274.959-1.29 1.082-1.413A.55.55 0 0 1 14.717 2c1.56 0 2.329 1.029 2.438 1.22a.458.458 0 0 1 .069.371c-.028.151-.329 1.152-.26 1.605.365 1.537 1.383 1.742 1.89 1.783.493.028 1.644-.356 1.809-.343a.63.63 0 0 1 .424.206c.535.31.85 1.715.905 2.14.027.233-.014.439-.11.562-.11.138-1.165.714-1.48 1.112-.855.982-.342 2.25-.068 2.606.26.37 1.22.905 1.288.96.15.137.26.302.315.494.146 1.413-.89 2.387-1.069 2.47zm-8.905-.535c.644 0 1.246-.123 1.822-.356a4.576 4.576 0 0 0 1.493-1.016 4.694 4.694 0 0 0 1-1.495c.247-.562.357-1.18.357-1.81 0-.659-.11-1.262-.356-1.825a4.79 4.79 0 0 0-1-1.481 4.542 4.542 0 0 0-1.494-1.002 4.796 4.796 0 0 0-3.631 0 4.627 4.627 0 0 0-1.48 1.002c-.424.425-.767.919-1 1.481a4.479 4.479 0 0 0-.37 1.825c0 .644.124 1.248.37 1.81a4.62 4.62 0 0 0 1 1.495c.425.426.918.768 1.48 1.016a4.677 4.677 0 0 0 1.809.356z"
                                      fill-rule="evenodd"></path>
                            </svg>
                            <p style="margin-top: -12px;">设置</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
							<span>
									<svg fill="currentColor" viewBox="0 0 24 24" width="16" height="16"
                                         style="margin-top: 5px; margin-left: -40px;">
										<path d="M2 11.999c0-2.756 1.154-5.417 3.167-7.3a1.266 1.266 0 0 1 1.73 1.847 7.396 7.396 0 0 0-2.367 5.453c0 4.119 3.35 7.47 7.47 7.47 4.119 0 7.47-3.351 7.47-7.47a7.41 7.41 0 0 0-2.279-5.37 1.266 1.266 0 0 1 1.76-1.819A9.923 9.923 0 0 1 22 12c0 5.513-4.486 10-10 10s-10-4.487-10-10zm8.699-.482V3.26a1.26 1.26 0 1 1 2.52 0v8.257a1.26 1.26 0 1 1-2.52 0z"
                                              fill-rule="evenodd"></path>
									</svg>
									<p style="margin-top: -12px;"><a href="/User/exit.do"
                                                                     style="text-decoration: none; color: lightgrey">退出</a></p>
                        </a>
                    </li>
                </ul>
            </li>
        </div>
    </div>
    </div>
</header>
<div class="container bo">
    <div class="row">
        <div class="navbar bo1" style="margin-top: 60px">
            <ul class="nav navbar-nav size">
                <li class="li"><a href="#">推荐</a></li>
                <li class="li"><a href="#">关注</a></li>
                <li class="li"><a href="#">热榜</a></li>
            </ul>
        </div>
        <div class="bor">
            <table style="margin-top: 50px;">
                <c:forEach items="${artlist}" var="article">
                <tr style="margin-bottom: 50px">
                    <div class="row m">
                        <div class="col-md-1" style="margin-left: 5px;margin-top: 5px;">
                            <img style="width: 38px; height: 38px;" src="/img/+${article.userheadphoto}"/>
                        </div>
                        <div class="col-md-11 col-md-offset-2" style="margin-top: -41px;">
                            <span class="mx">${article.usernickname}</span><br/>
                            <p class="ms">${article.userdescribe}</p>
                        </div>
                    </div>
                    <div class="row m">
                        <div class="col-md-12">
                            <span style="color: #8590a6;margin-left: 5px;">${article.beclick}人赞同了该回答</span>
                        </div>
                    </div>
                    <div class="row m">
                        <div class="col-md-12">
                            <p style="line-height: 20px;">${article.content}</p>
                        </div>
                    </div>
                    <div class="row m">
                        <div class="col-md-3">
                            <button class="btn btnmx" type="button">
                                <span class="glyphicon glyphicon-triangle-top"></span>
                                点赞 <span>${article.beclick}</span>
                            </button>
                        </div>
                        <div class="col-md-2 span">
                            <span class="glyphicon glyphicon-send"></span>
                            <a href="#" class="text">分享</a>
                        </div>
                        <div class="col-md-2 span">
                            <span class="glyphicon glyphicon-star"></span>
                            <a href="#" class="text">收藏</a>
                        </div>
                        <div class="col-md-2 span">
                            <span class="glyphicon glyphicon-heart"></span>
                            <a href="#" class="text">感谢</a>
                        </div>
                        <div class="col-md-2 span">
                            <span class="glyphicon glyphicon-comment"></span>
                            <div data-spy="scroll" data-offset="60">
                                <a href="#mycollapse${article.id}" onclick="select(${article.id})"  class="btn btn-link bu"
                                   data-toggle="collapse">评论</a>
                                <div class="collapse" id="mycollapse${article.id}" style="width: 693px">
                                    <div id="obj" title="1" class="container"
                                         style="margin-left: -520px;margin-top: 10px">
                                        <div class="row" style="margin-left: 10px">
                                            <div class="row" style="height: 50.99px; line-height:50.98px;">
                                                <h4 style="font-size: 15px;font-weight: bold; padding-left: 10px; padding-top: 8px;">
                                                    <span id="${article.id}"></span></h4>
                                            </div>
                                            <div id="zhuijia${article.id}"></div>
                                            <hr/>
                                            <div>
                                                <div class="form-inline" style="margin-top: 10px">
                                                    <input type="text" id="content${article.id}" name="content" class="form-control" placeholder="写下你的评论..." style="width: 450px;"/>
                                                    <input type="hidden" id="useruid${article.id}" name="useruid" value="${User.uid}" />
                                                    <input type="hidden" id="articleid${article.id}" name="articleid" value="${article.id}" />
                                                    <input type="button" class="btn btn-primary" onclick="addpl(${article.id})" value="发布"/>
                                                </div>
                                            </div>
                                          </div>
                                    </div>
                                    <div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
        </div>
        </tr>
        <hr/>
        </c:forEach>
        </table>
    </div>
</div>
</div>
<div id="div01">
    <div id="div06" class="div06">
        <div>
            <div id="div02">
                <%--<img id="img01" src="../img/huida.jpg" width="18px" height="20px" />--%>
                <span class="glyphicon glyphicon-list-alt" id="img01"></span>
                <p id="p01">
                    <a class="a01" href="">写回答</a>
                </p>
            </div>
        </div>
        <div>
            <div>
                <%--<img src="../img/wenzhang.jpg" width="18px" height="20px" />--%>
                <span class="glyphicon glyphicon-edit" id="img02"></span>
                <p id="p02">
                    <a class="a01" href="/jsp/xiewenzhang.jsp">写文章</a>
                </p>
            </div>
        </div>
        <div>
            <div>
                <%--<img  src="../img/xiangfa.jpg" width="18px" height="20px" />--%>
                <span class="glyphicon glyphicon-question-sign" id="img03"></span>
                <p id="p03">
                    <a class="a01" href="">写想法</a>
                </p>
            </div>
        </div>
        <div id="div04">
            <a class="a02" href="" style="text-decoration: none">
                <%--<img  src="../img/houda.jpg" width="22px" height="20px" />--%>
                <span class="glyphicon glyphicon-comment" id="img04"></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <h4 id="samp01">我的稍后回答</h4></a>
        </div>
        <div id="div05">
            <a class="a03" href="" style="text-decoration: none">
                <%--<img  src="../img/caogao.jpg" width="22px" height="20px" />--%>
                <span class="glyphicon glyphicon-trash" id="img05"></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <h4 id="samp02">我的草稿</h4>
                <div class="div06">1</div>
            </a>
        </div>
    </div>
    <div id="div07">
        <div id="div08">
            <a class="a04" href="" style="text-decoration: none">
                <%--<img  src="../img/shoucang.jpg" width="22px" height="20px" />--%>
                <span class="glyphicon glyphicon-star" id="img06"></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <h4 id="samp03">我的收藏</h4>
                <div class="div07 "><span class="badge">1</span></div>
            </a>
        </div>
        <div id="div09">
            <a class="a05" href="" style="text-decoration: none">
                <%--<img  src="../img/wenti.jpg" width="22px" height="20px" />--%>
                <span class="glyphicon glyphicon-plus-sign" id="img07"></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <h4 id="samp04">我关注的问题</h4>
                <div class="div08">1</div>
            </a>
        </div>
        <div id="div010">
            <a class="a06" href="" style="text-decoration: none">
                <%--<img  src="../img/yaoqing.jpg" width="22px" height="20px" />--%>
                <span class="glyphicon glyphicon-user" id="img08"></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <h4 id="samp05">我的邀请</h4>
                <div class="div09 ">1</div>
            </a>
        </div>
        <div id="div011">
            <a class="a07" href="" style="text-decoration: none">
                <%--<img id="img08" src="../img/zhongxing.jpg" width="22px" height="20px" />--%>
                <span class="glyphicon glyphicon-modal-window" id="img08"></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <h4 id="samp06">服务中心</h4>
            </a>
        </div>
        <div id="div012">
            <a class="a08" href="" style="text-decoration: none">
                <%--<img id="img08" src="../img/fuwu.jpg" width="22px" height="20px" />--%>
                <span class="glyphicon glyphicon-copyright-mark" id="img08"></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <h4 id="samp07">版权服务中心</h4>
            </a>
        </div>
    </div>
</body>
</html>
<script>
    var a = 0;
    function select(id) {
        a=id;
        $.getJSON("http://localhost:8080/comment/counts.do",{"id":id},function (rs) {
                 $("#"+a).text(rs+"条评论");
                bl(id);
        })
    }
    function addpl(id) {
        if(document.getElementById('content'+id).value != ""){
        $.getJSON("http://localhost:8080/comment/add.do",{"content":document.getElementById('content'+id).value,"useruid":document.getElementById('useruid'+id).value,"articleid":document.getElementById('articleid'+id).value},function (rs) {
            alert(rs);
                location.reload([false]);
        });
    }else {
            alert("评论不能为空！！！");
        }
    }
    function bl(id) {
        var str;
        $.getJSON("http://localhost:8080/comment_userController/seelcts.do",{"articleid":id},function (ra) {
            for (var i=0;i<ra.length;i++){
                str="<div class='row'>"+
                    "<div class='col-md-2'>"+
                    "<img src='/file/upload//UserHeadPhoto/"+ra[i].headphoto+"' width='24px' height='24px' />"+
                    "   <span style='font-weight: 500px;'>"+ra[i].nickname+"</span>"+
                    " </div>"+
                    "  <div class='col-md-1 col-md-offset-8'>"+
                    "   <span style='display: block; width: 44.36px; height: 26.81px; font-size: 14px;'>三天前</span>"+
                    "  </div>"+
                    "   </div>"+
                    "  <div class='row'>"+
                    "  <div class='col-md-10 col-md-offset-1'>"+
                    " <p>"+ra[i].content+"</p>"+
                    " </div>"+
                    " </div>"+
                    " <div class='row' style='border-bottom:1px solid lightgray;width:500px;margin-left:70px;'>"+
                    " <div class='col-md-2 col-md-offset-1'>"+
                    "<button class='btn btn-default' id='btn_collect' onclick='goin("+ra[i].id+","+ra[i].beclick+","+ra[i].zt+")' style='border: none;outline:medium;margin-top: -5px;color: #646464;background-color: none'>"+
                    "<span class='iconfont icon-dianzan' id='btn_collect_icon"+ra[i].id+"' aria-hidden='true' >点赞</span>" +
                    " <span style='color: lightgrey;'>"+ra[i].beclick+"</span>"+
                    "</button>"+
                    "</div>"+
                    "<div class='col-md-2'>"+
                    "<a href='' style='text-decoration: none;'><span class='glyphicon glyphicon-link' style='color: lightgrey; display: inline-flex; align-items: center;'>"+
                    "</span>"+
                    "<span style='color: lightgrey;'>分享</span></a>"+
                    "</div>"+
                    "<div class='col-md-2'>"+
                    "<a href='' style='text-decoration: none;'>"+
                    "<span class='glyphicon glyphicon-thumbs-down' style='color: lightgrey; display: inline-flex; align-items: center;'></span>"+
                    "<span style='color: lightgrey;'>踩</span></a>"+
                    "</div>"+
                    "<div class='col-md-2'>"+
                    "<a href='' style='text-decoration: none;'>"+
                    "<span class='glyphicon glyphicon-warning-sign' style='color: lightgrey; display: inline-flex; align-items: center;'></span>"+
                    "<span style='color: lightgrey;'>举报</span></a>"+
                    "</div>"+
                    "</div>";
                $("#zhuijia"+id).append(str);
                /*var ccuid = rs[i].useruid;
                alert(ccuid);
                bl(ccuid);*/
            }
        })
    }
    /*$('#btn_collect').click(function () {
        alert('进入')
        var classname = $('#btn_collect_icon').attr('class');
        $('#btn_collect_icon').removeClass('icon-dianzan icon-dianzan1');
        if(classname == 'iconfont icon-dianzan' ){
            $('#btn_collect_icon').addClass('iconfont icon-dianzan1');
            alert('点赞成功');
        }else{
            $('#btn_collect_icon').addClass('iconfont icon-dianzan');
            alert('取消点赞');
        }
    })*/
    function goin(id,beclick,zt) {
        var classname = $('#btn_collect_icon'+id).attr('class');
        $('#btn_collect_icon'+id).removeClass('icon-dianzan icon-dianzan1');
        if(classname == 'iconfont icon-dianzan' && zt == 0){
            $('#btn_collect_icon'+id).addClass('iconfont icon-dianzan1').html("已点赞");
            var zan = beclick;
            zan+=1;
            zt=1;
            $.getJSON("http://localhost:8080/comment/zan.do",{"beclick":zan,"id":id,"zt":zt},function (ra) {
              alert("点赞成功")
                location.reload([false]);
            })
        }else{
            $('#btn_collect_icon'+id).addClass('iconfont icon-dianzan').html("点赞");
            var zan = beclick;
            zan-=1;
            zt=0;
            $.getJSON("http://localhost:8080/comment/zan.do",{"beclick":zan,"id":id,"zt":zt},function (ra) {
                alert("取消点赞")
                location.reload([false]);
            })
        }
    }
</script>
